import { ReactElement, useRef, useEffect } from 'react'
import { Modal, Form, FormInstance, Button } from 'antd'
import { ArbitratorSchema } from '@src/components/schema/arbitrator'
import style from './index.module.less'
import Text from '@components/text'

const { Item } = Form

interface Props {
  value: ArbitratorSchema | null
  visible: boolean
  hide: () => void
}

function Main ({ value, visible, hide }: Props): ReactElement {
  const formRef = useRef<FormInstance>(null)
  useEffect(() => {
    const c = formRef.current
    if (!visible && c !== null) {
      c.resetFields()
    } else if (visible && value !== null) {
      c?.setFieldsValue(value)
    }
  }, [value, visible])
  return (
    <Modal title='仲裁员详情' visible={visible} onCancel={hide} footer={(
      <Button onClick={() => hide()}>确定</Button>
    )}>
      <Form labelCol={{ flex: '88px' }} ref={formRef} className={style.box}>
        <Item name='id' noStyle><span /></Item>
        <Item name='name' label='姓名'>
          <Text />
        </Item>
        <Item name='gender' label='性别'>
          <Text />
        </Item>
        <Item name='area' label='所在区域'>
          <Text />
        </Item>
        <Item name='occupation' label='职业分类'>
          <Text />
        </Item>
        <Item name='retire' label='是否退休'>
          <Text format={(v) => v === 1 ? '是' : '否'} />
        </Item>
        <Item name='professional' label='专业'>
          <Text />
        </Item>
        <Item name='structure_post' label='职务'>
          <Text />
        </Item>
        <Item name='license' label='身份证'>
          <Text />
        </Item>
        <Item name='mobile' label='手机号'>
          <Text />
        </Item>
        <Item name='tel' label='电话'>
          <Text />
        </Item>
        <Item name='address' label='地址'>
          <Text />
        </Item>
        <Item name='session' label='第几届'>
          <Text />
        </Item>
      </Form>
    </Modal>
  )
}

export default Main
